<template>
  <div o-Container>
    <!-- created: create, -->
    <div class="top_box">
      <div class="search_box">
          <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="">
          <input :value="searchValue" type="text" placeholder="请输入搜索内容"
              @keydown.enter="searchEnterKeyPress" @blur="searchEnterKeyPress">
      </div>
    </div>

    <o-list v-bind:source="list.products">
    <!-- v-bind="{ created: create, modified: modify, searched: search, exported: output }"  -->
      <template slot="config" slot-scope="scope">
        <div class="img_box">
          <img @click="showLookDiaolog(scope)"
            src="../../../../../static/skin/default/MCS/AIGC/Inventory/images/chakan.png" alt="">
          <img @click="showEditDialog(scope)"
            src="../../../../../static/skin/default/MCS/AIGC/Inventory/images/bianji.png" alt="">
        </div>
      </template>
    </o-list>
    <look-products ref="lookProduct" :productId="rowsId" @showEdit="showEdit"></look-products>
    <edit-products ref="editProduct" :productId="rowsId"></edit-products>

    <!-- <o-dialog v-bind:source="lookPanel" v-bind="{ opened: load, closed: load }">
      <template slot="content">
        <o-item v-bind:source="item.products" v-bind="{ saved: save, backed: back }"></o-item>
      </template>
    </o-dialog> -->

    <!-- <o-dialog v-bind:source="panel" v-bind="{ opened: load, closed: load }">
      <template slot="content">
        <o-item v-bind:source="item.products" v-bind="{ saved: save, backed: back }"></o-item>
      </template>
    </o-dialog> -->
  </div>
</template>

<script>
import lookProducts from '../Components/lookProducts.vue'
import EditProducts from '../Components/editProducts.vue'
export default {
  name: "mms_platform_company_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
  components: {
    lookProducts,
    EditProducts,
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      list: {
        products: {
          data: {
            id: 1187, // 菜单表的八爪鱼ID
            cellData: [
              { name: "Name", width: 320 },	// 产品名称
              { name: "CompanyID"},	// 企业名称
              { name: "ID" },	// ID
              { name: "FlagList", width: 200 },// 产品类型
              { name: "IsOpen" }, // 启用/停用
              { name: "CreateTime", width: 160 },	// 创建时间
              { name: "UpdateTime", show: false },	// 修改时间
              { name: "ContractID", show: false },	// 合同编号
              { name: "Name_EN", show: false },	// Name_EN
              { name: "FlagList", show: false },	// 所属标签
              { name: "EquityServiceRate", show: false },	// 权益服务费费率（%）
              { name: "PlatformServiceRate", show: false },	// 平台服务费费率（%）
              { name: "ThumbnailPath", show: false },	// 缩略图/封面图（1张）
              { name: "Description", show: false },	// 产品描述（富文本）
              { name: "Description_EN", show: false },	// 产品描述（英文）
              { name: "CreateUserID", show: false },	// 创建人
            ],
            paramData: {}
          },
          configWidth: 60,
          showNumber: true,
          searchValue: "",
        },
      },
      item: {
        products: {
          // 以下参数默认由组件内部创建，但是如果有需要，开发人员可在这里提前设置，组件将按照您的预期渲染。
          data: {
            id: 1187,
            value: "",
            cellData: [
              {name: "CompanyID"},	// 企业名称
              {name: "ContractID"},	// 合同编号
              {name: "CostPrice"},	// 平台价格
              {name: "CreateTime"},	// 创建时间
              {name: "CreateUserID"},	// 创建人
              {name: "Description"},	// 产品描述（富文本）
              {name: "Description_EN"},	// 产品描述（英文）
              {name: "EquityServiceRate"},	// 小程序服务费费率
              {name: "FlagList"},	// 产品类型
              {name: "ID"},	// ID
              {name: "IsOpen"},	// 是否启用
              {name: "Name"},	// 产品名称
              {name: "Name_EN"},	// 英文名称
              {name: "PlatformServiceRate"},	// 平台服务费费率（%）
              {name: "SalePrice"},	// 市场价
              {name: "ThumbnailPath"},	// 缩略图/封面图（1张）
              {name: "UpdateTime"},	// 修改时间
            ]
          },
          render: false,
        },
      },
      lookVisible: false,
      editVisible: false,
      rows: {},
      rowsId: null,
      panel: {
        visible: false
      },
      searchValue: '',
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const cellData = this.list.products.data.cellData;
      // 遍历 cellData，找到符合条件的元素，并添加键值对
      cellData.forEach(item => {
        if (item.name === "CompanyID") {
          // 添加 filterKey 和 filterValue
          item.filterKey = '=';
          item.filterValue = this.octopus.passport.authorization.company == 1 ? '' : this.octopus.passport.authorization.company;
        }
      });
    },
    create: function () {//弹出创建页面
      this.item.products.data.value = null;
      this.item.products.control.load();
      this.panel.visible = true;
    },
    output: function (data) {
      this.octopus.tips.success("下载完成。");
    },
    search: function (cell) {
    },
    modify: function (row) {//修改页面
      this.item.products.data.value = row.ID;
      this.item.products.control.load();
      this.panel.visible = true;
    },
    view: function (row) {
      alert("view key: " + JSON.stringify(row));
    },
    save: function (data) {// 保存
      this.octopus.tips.success(data);
      // 刷新list
      this.list.products.control.load();
      this.back();
    },
    back: function () {
      this.panel.visible = false;
    },
    del: function (row) {
      let o = this
      // alert("del key: " + JSON.stringify(row));
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.octopus.request.api.post("/Octopus/Engine/Item", {
          id: 1187, // 菜单表的八爪鱼ID
          type: "DELETE",
          value: row.ID,
          cellData: [
            { name: "ID", defaultValue: row.ID },
          ],
        },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code === 200) {
              o.list.products.control.load();
            } else {
              o.octopus.tips.error(data);
            }
          }
        );
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    showLookDiaolog(row) {
      this.rows = row.data.row
      this.rowsId = row.data.row.ID
      this.$refs.lookProduct.showDialog()
    },

    showEditDialog(row) {
      this.rows = row.data.row
      this.rowsId = row.data.row.ID
      this.$refs.editProduct.showDialog()
      // this.item.products.data.value = row.data.row.ID;
      // this.item.products.control.load();
    },
    showEdit(row) {
      this.rows = row
      this.rowsId = row.ID
      this.$refs.editProduct.showDialog()
      // this.item.products.data.value = row.ID;
      // this.item.products.control.load();
      // this.panel.visible = true
    },

    searchEnterKeyPress(e) {
      if(e.target.value == this.searchValue) {
        return
      }
      this.searchValue = e.target.value
      const cellData = this.list.products.data.cellData;
      // 遍历 cellData，找到符合条件的元素，并添加键值对
      cellData.forEach(item => {
        if (item.name === "Name") {
          // 添加 filterKey 和 filterValue
          item.searchKey = 'like'
          item.searchValue = this.searchValue
        }
      })
      this.list.products.control.load()
    },
  },
  props: ["oData"]
}
</script>
<style scoped>
.top_box {
    width: 100%;
    height: 5.3rem;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-bottom: 1.2rem;
    box-sizing: border-box;
}
 .top_box .search_box {
    width: 32rem;
    height: 100%;
    border: 1px solid #F0F0F0;
    border-radius: 4rem;
    display: flex;
    justify-content: space-between;
    padding: 0 .8rem;
    box-sizing: border-box;
}

 .top_box .search_box input {
    border: none;
    outline: none;
    width: 70%;
}

 .top_box .search_box img {
    cursor: pointer;
}

 .top_box .button_box button {
    width: 15rem;
    height: 100%;
    border-radius: 4rem;
    border: none;
    color: #fff;
    background-color: #F78C52;
    box-shadow: 0px -3px 4px 0px rgba(204, 190, 186, 0.4);
    font-size: 1.7rem;
    cursor: pointer;
}

 .top_box .button_box button {
    margin-right: 1.3rem;
}




.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  cursor: pointer;
}

.el-message-box {
  background-color: #fff !important;
}

>>> .content > .Content .Item .Body {
  display: flex;
  align-items: center;
}

>>> .content > .Content .Item .Body .DisplayName {
  width: 80px;
  flex-grow: 0;
  flex-shrink: 0;
}
>>> .content > .Content .Item .Body .OctopusControl {
  flex: 1;
}

>>> .Content {
  height: 84vh!important;
}
</style>
